<!--
 * @Description: ------------ fileDescription -----------
 * @Author: snows_l snows_l@163.com
 * @Date: 2024-08-13 10:04:53
 * @LastEditors: snows_l snows_l@163.com
 * @LastEditTime: 2025-11-05 15:54:01
 * @FilePath: \BLOG\src\views\msgBorad\index.vue
-->
<template>
  <div class="page-wrap">
    <PageTopCover
      style="width: 100vw; height: 100vh !important"
      :moduleTitle="''"
      :textIcon="''"
      :coverImg="getOnlineImgUrl('287')"
      :isMobile="isMobi"
      :modulDesc="''"
      :isArticle="false"
      :bgColor="''"
      :moduleBgColor="''"></PageTopCover>

    <div class="msg-input-warp">
      <div class="msg-input-box pointer" :class="{ 'm-msg-input-box': isMobi }" @click="handleTome">
        <div class="input-inner">说点什么吧！</div>
      </div>
    </div>
    <div class="danmuku-wrap" style="width: 100%" :style="{ height: isMobi ? '100vh' : '100vh' }">
      <!--
      3.属性
        参数	说明	类型	默认值
        danmus	弹幕元素列表，支持纯文本或者自定义对象(支持 v-model)	Array	字符串或对象	[]
        channels	轨道数量	Number		0
        autoplay	是否自动播放	Boolean		true
        useSlot	是否开启弹幕插槽	Boolean		false
        loop	是否开启弹幕循环	Boolean		false
        fontSize	弹幕字号（slot 模式下不可用）	Number		18
        extraStyle	额外样式（slot 模式下不可用）	String
        speeds	弹幕速度（每秒移动的像素数）	Number		200
        debounce	弹幕刷新频率(ms)	Number		100
        randomChannel	随机选择轨道插入	Boolean		false
        isSuspend	是否开启弹幕悬浮暂停（试验型功能）	Boolean		false
        top	弹幕垂直间距(px)	Number		4
        right	弹幕水平间距(px)	Number		0

      4.内置方法
        方法名	说明	参数
        play	开始/继续播放	-
        pause	暂停弹幕播放	-
        stop	停止播放并清空弹幕	-
        show	弹幕显示	-
        hide	弹幕隐藏	-
        reset	重置配置	-
        resize	容器尺寸改变时重新计算滚动距离（需手动调用）	-
        push	发送弹幕（插入到弹幕列表末尾，排队显示）	danmu 数据，可以是字符串或对象
        add	发送弹幕（插入到当前播放位置，实时显示）	danmu 数据，可以是字符串或对象
        insert	绘制弹幕（实时插入，不进行数据绑定）	danmu 数据，可以是字符串或对象
        getPlayState	获得当前播放状态
      5.Events
        事件名	说明	返回值
        list-end	所有弹幕插入完毕	-
        play-end	所有弹幕播放完成（已滚出屏幕）	index（最后一个弹幕的下标）
        dm-over	开启弹幕悬浮暂停时，当进入弹幕，暂停时触发	触发的弹幕对象元素
        dm-out	开启弹幕悬浮暂停时，当离开弹幕，恢复滚动时触发	触发的弹幕对象元素
      -->
      <DanmuKu
        ref="danmuRef"
        v-model:danmus="state.danmus"
        :useSlot="true"
        :loop="true"
        style="height: 100%; width: 100%"
        :randomChannel="true"
        :isSuspend="true"
        :speeds="isMobi ? 50 : 120"
        :channels="isMobi ? 0 : 0"
        :autoplay="false"
        :top="isMobi ? 20 : 30"
        :right="isMobi ? 20 : 30"
        @dm-out="handleDmOut"
        @dm-over="handleDmOver">
        <template v-slot:dm="{ index, danmu }">
          <div class="danmu-item" :style="{ 'background-color': danmu.color }">
            <IconLike :animation="danmu.isGood" :size="22" class="iconfont pointer" @click="handleGood(danmu)"></IconLike>
            <span v-if="danmu.likeCount > 0" style="margin-left: 10px">{{ danmu.likeCount || 0 }}</span>
            <div class="pointer" style="display: flex; align-items: center" @click="handleClickDanmu(danmu)">
              <img style="height: 20px; margin: 0 10px; border-radius: 50%" v-if="danmu.qq" :src="getQQAvatar(danmu.qq)" alt="" />
              <span style="font-size: 1rem; margin-right: 0.375rem">{{ danmu.comment }}</span>
              <img class="copy-icon" style="height: 20px; margin: 0 10px; opacity: 0" :src="getImgIcon('copy.svg')" alt="" />
            </div>
          </div>
        </template>
      </DanmuKu>
    </div>
    <div class="page-container-wrap" :class="{ 'm-page-container-wrap': isMobi }">
      <div class="max-width-wrap">
        <div class="page-content-inner">
          <div class="entry-content">
            <div class="poem-wrap pointer kbn-custom" data-tip="点击刷新 「诗词」!" @click="getShici">
              <div class="poem-border poem-left"></div>
              <div class="poem-border poem-right"></div>
              <h1 class="poem-title text-shadow">念两句诗</h1>
              <div class="poem-content text-shadow">{{ state.shici.content }}</div>
              <div class="poem-author text-shadow">{{ state.shici.author }} {{ state.shici.origin ? '《' : '' }}{{ state.shici.origin }}{{ state.shici.origin ? '》' : '' }}</div>
            </div>
            <p style="font-size: 16px; margin-bottom: 20px; line-height: 24px">
              声明：留言板均会
              <span style="color: red">“通过敏感词检测”</span>
              并且由站长
              <span style="color: red">“审核通过”</span>
              之后再进行展示。如有不当言论，请联系站长进行删除处理。
            </p>
            <p class="thanks-msg text-shadow pointer" @click="handleTome">很感谢你能访问该页面，如果你有什么和站长说的或者有什么问题想问的，可以随时在下面评论哦~</p>
          </div>
          <div class="msg-list-content" :class="{ 'm-msg-list-content': isMobi }">
            <div class="components text-shadow">Conments {{ state.page.total }} 条留言</div>
            <div class="msg-list-hav" :style="{ marginBottom: state.page.total <= state.page.size ? '40px' : '0px' }" v-if="state.list.length > 0">
              <div class="msg-item-wrap intersection-observer" v-for="(item, index) in state.list" :key="index">
                <div class="msg-item-bg"></div>
                <div class="msg-item">
                  <div class="msg-item-inner">
                    <div class="info-wrap">
                      <div class="left-info">
                        <div class="img-wrap">
                          <img :src="getQQAvatar(item.qq)" alt="" />
                        </div>
                        <div class="r-info">
                          <div class="name">
                            <span style="margin: 0 0.25rem">{{ item.nickName }}</span>
                            <div class="bozhu" v-if="item.qq === '37523953'">站长</div>
                            <div
                              class="bozhu level"
                              :style="{
                                color: item.qq === '37523953' ? '#ff6600' : '#d3a833',
                                border: item.qq === '37523953' ? '.0625rem solid #ff6600' : '.0625rem solid #d3a833'
                              }"
                              style="margin-left: 0.3125rem; margin-right: 20px">
                              Lv{{ item.qq == '37523953' ? '1' : '' }}0
                            </div>
                          </div>
                          <div class="platform" style="display: flex; align-items: center">
                            <div class="pulic-time">发布于：{{ item.time }}</div>
                            <div v-if="(item.browser || item.os) && !isMobi" style="font-size: 0.75rem; display: flex; align-items: center">
                              {{ isMobi ? '平台：' : '' }}
                              <div style="display: flex; align-items: center">
                                <IconLable type="os" :value="item.os" showValue></IconLable>
                              </div>
                              <div style="margin: 0 20px; display: flex; align-items: center" v-if="item.browser">
                                <IconLable type="browser" :value="item.browser" showValue></IconLable>
                              </div>
                            </div>
                            <div v-if="item.websiteUrl && !isMobi" style="font-size: 0.75rem">
                              个人小站：
                              <span class="link kbn-custom pointer" :data-tip="'是否前往 「' + item.nickName + '」 的小站吗？'" @click="handleToWebsite(item.websiteUrl)">
                                {{ item.websiteUrl }}
                              </span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="msg-content-wrap">
                      <div class="msg text">
                        <div class="msg-text-item" v-for="text in item.comments">
                          {{ text }}
                        </div>
                      </div>
                      <div class="operation-wrap">
                        <div class="like-wrap">
                          <IconLike :size="18" :animation="item.isGood" class="iconfont pointer" @click="handleGood(item)"></IconLike>
                          <span class="like-value">{{ item.likeCount || 0 }}</span>
                        </div>
                        <div class="comment-wrap pointer" @click="handleComent(item.id, item)">
                          <img class="comment-icon" src="@/assets/images/icon/icon_comment.svg" alt="" />
                          <span v-if="item.children && item.children.length" class="comment-value">{{ item.children && item.children.length }}</span>
                        </div>
                      </div>
                    </div>
                    <div class="sub-commen-wrap" v-if="item.children && item.children.length">
                      <div class="sub-comment-padding">
                        <div class="sub-comment-item" v-for="subItem in item.children" :key="subItem.id">
                          <div class="title">
                            <img :src="getQQAvatar(subItem.qq)" class="sub-avatar" alt="" srcset="" style="height: 30px; margin-right: 20px; border-radius: 5px" />
                            <span>{{ subItem.nickName }}</span>
                            <div class="bozhu" v-if="subItem.qq === '37523953'">站长</div>
                            <span style="margin: 0 0.375rem; color: var(--theme-light-color-4)">回复</span>
                            <span>{{ subItem.toNickName }}：</span>
                          </div>
                          <div class="msg-content-wrap">
                            <div class="sub-content text">
                              <div class="msg-text-item" v-for="text in subItem.comments">
                                {{ text }}
                              </div>
                            </div>
                            <div class="operation-wrap">
                              <div class="like-wrap">
                                <IconLike :size="18" :animation="subItem.isGood" class="iconfont pointer" @click="handleGood(subItem)"></IconLike>
                                <span class="like-value">{{ subItem.likeCount || 0 }}</span>
                              </div>
                              <div class="comment-wrap pointer" @click="handleComent(item.id, subItem)">
                                <img class="comment-icon" src="@/assets/images/icon/icon_comment.svg" alt="" />
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="no-msg" v-else>
              <Empty :text="'暂无留言数据，期待您的留言~'" :loadingText="'留言正在拼命加载中...'" :loading="state.loading"></Empty>
            </div>
          </div>

          <div class="botom-wrap" style="display: flex; justify-content: center; align-items: center">
            <LoadingMore
              v-if="store.projectConfig.pageType == 'more'"
              :loading="state.loading"
              :hasMore="state.isMore"
              :length="state.list.length"
              @loadMore="handleLoadMore"></LoadingMore>
            <CustomPage v-else :page="state.page" @change="handlePageChange" :loading="state.loading" scorllTop="msg-list-content"></CustomPage>
          </div>
        </div>
        <div class="comment-warp" style="padding-bottom: 20px">
          <div class="comment-input-wrap intersection-observer" ref="commentInputRef" v-if="isShowEnter">
            <div class="ttt">
              <div class="hui-warp">
                <div class="back-title" v-if="state.form.pId">
                  回复：
                  <span :style="{ color: 'var(--theme-color)' }">{{ state.form.toNickName }}</span>
                  <div class="bozhu" v-if="state.form.toQQ === '37523953'">站长</div>
                </div>
              </div>
              <div class="opertion-wrap">
                <div class="back-title back-me pointer" @click="handleDaka">打 卡</div>
                <div class="back-title back-me pointer" @click="handleTome">给我留言</div>
              </div>
            </div>
            <CommentInput v-model="state.comment" @submit="handleComment"></CommentInput>
          </div>
          <div v-else class="no-input">⚠️ 站长暂时关闭留言功能，请谅解！</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { addComment, addLike, getCommentList, getDanmuList } from '@/api/comment';
import useIntersectionObserver from '@/hooks/useIntersectionObserver';
import useResize from '@/hooks/useResize';
import { useAppStore } from '@/store/app';
import { copyToClipboard, CustomMessage, getImgIcon, getOnlineImgUrl, getQQAvatar, tranListToTree } from '@/utils/common';
import { live2dReloadElement, live2dShowMessage } from '@/utils/live2d';
import { getRandomColor } from '@/utils/theme';
import axios from 'axios';
import { nextTick, onMounted, onUpdated, reactive, ref } from 'vue';
import moment from 'moment';
import DanmuKu from 'vue3-danmaku';
useIntersectionObserver();
// useIntersectionObserver(true, '.comment-wrap');
const { isMobi } = useResize();
const store = useAppStore();

const danmuRef = ref(null);
const commentInputRef = ref(null);
let isShowEnter = ref(store.projectConfig.showEntry == true || store.projectConfig.showEntry == 'true' || false);

const state = reactive({
  loading: false,
  list: [],
  backList: [],
  comment: {
    value: '',
    qq: '',
    nickName: '',
    avatarUrl: '',
    email: '',
    websiteUrl: '',
    isPrivacy: false,
    isEmailFeekback: true,
    submitLoading: false
  },
  shici: {
    content: '春风十里，不如你',
    origin: '',
    author: ''
  },
  form: {
    pId: 0,
    toId: 0,
    toNickName: '',
    toQQ: ''
  },
  isMore: true,

  page: {
    page: 1,
    size: 5,
    total: 0
  },
  danmus: [12, 12, 12, 12, 45],
  isGood: false
});

//  获取 / 刷新古诗词
const getShici = () => {
  axios.get('https://v1.jinrishici.com/all.json').then(res => {
    if (res.status === 200 && res.data.content) {
      state.shici = res.data;
    }
  });
};
getShici();

// 弹幕滚动开始
const handleDanmuPlay = () => {
  if (danmuRef.value) {
    danmuRef.value.play();
  }
};

// 获取留言列表
const getCommentListFn = (isReset = false, scorllTopCallback?: () => void) => {
  state.loading = true;
  if (isReset) {
    state.list = [];
    state.backList = [];
  }
  getCommentList({ ...state.page, type: 0 })
    .then((res: any) => {
      if (res.code === 200) {
        res.data.forEach((item: any) => {
          item.comments = item.comment.split('\n');
        });
        if (store.projectConfig.pageType == 'more') {
          state.list = tranListToTree([...state.backList, ...res.data], 'id', 'pId', 'children');
          state.backList = [...state.backList, ...res.data];
        } else {
          state.list = tranListToTree([...res.data], 'id', 'pId', 'children');
          state.backList = [...res.data];
        }

        state.page.total = res.total;
        if (state.list.length >= res.total) {
          state.isMore = false; // 已经没有更多数据了
        }
        scorllTopCallback && scorllTopCallback();
        state.loading = false;
      }
    })
    .catch(() => {})
    .finally(() => {
      state.loading = false;
    });
};

const handlePageChange = (page: number, size: number, scorllTopCallback: Function) => {
  state.page.page = page;
  state.page.size = size;
  getCommentListFn(false, scorllTopCallback);
};

// 获取弹幕列表
const getDanmuListFn = () => {
  getDanmuList().then(res => {
    if (res.code == 200) {
      state.danmus = res.data.map(item => {
        return {
          ...item,
          color: getRandomColor()
        };
      });
      handleDanmuPlay();
    }
  });
};
getDanmuListFn();
getCommentListFn();

interface DanEvent {
  el: Element;
}

// 弹幕 移入
const handleDmOut = (e: DanEvent) => {};

// 弹幕 移出
const handleDmOver = (e: DanEvent) => {};

// 弹幕点击
const handleClickDanmu = row => {
  // 复制弹幕内容
  copyToClipboard({
    content: row.comment,
    success: () => {
      CustomMessage({
        type: 'success',
        message: '复制成功'
      });
      console.log('复制成功');
    },
    error: () => {
      console.log('复制失败');
    }
  });
};

// 点赞
const handleGood = row => {
  addLike({ id: row.id }).then(res => {
    row.isGood = true;
    if (res.code === 200) {
      row.likeCount = res.data;
      setTimeout(() => {
        row.isGood = false;
      }, 500);
    }
  });
};

// 滚动到底部留言并且然输入框聚焦
const handleScrollToBottom = () => {
  nextTick(() => {
    let top = 0;
    const layoutEle: Element = document.querySelector('#layout') as Element;
    const commentInputEle: Element = document.querySelector('.comment-value-inner') as Element;
    if (commentInputRef.value) {
      top = (commentInputRef.value as Element).offsetTop - 70;
      layoutEle.scrollTo({ top, behavior: 'smooth' });
    }
    if (commentInputEle) commentInputEle.focus();
  });
};

// 回复留言
const handleComent = (pid, row) => {
  state.form.pId = pid;
  state.form.toId = row.id;
  state.form.toNickName = row.nickName;
  state.form.toQQ = row.qq;
  handleScrollToBottom();
};

// 给站长留言
const handleTome = () => {
  state.form.pId = 0;
  state.form.toId = 0;
  state.form.toNickName = '';
  state.form.toQQ = '';
  handleScrollToBottom();
};

// 加在更多
const handleLoadMore = () => {
  state.page.page++;
  getCommentListFn();
};

// 提交评论
const handleComment = () => {
  if (!state.comment.value.trim() || !state.comment.qq.trim() || !state.comment.nickName.trim()) {
    return false;
  }
  let params = {
    ...state.comment,
    comment: state.comment.value,
    isEmailFeekback: state.comment.isEmailFeekback ? 1 : 0,
    isPrivacy: state.comment.isPrivacy ? 1 : 0,
    ...state.form,
    type: 0
  };
  addComment(params).then((res: any) => {
    if (res.code === 200) {
      state.comment.value = '';
      state.comment.isPrivacy = false;
      state.comment.isEmailFeekback = true;
      state.form.pId = 0;
      state.form.toId = 0;
      state.form.toNickName = '';
      state.form.toQQ = '';
      getCommentListFn(true);
      state.comment.submitLoading = false;
      CustomMessage({ type: 'success', message: '留言成功' });
    }
  });
};

// 打卡
const handleDaka = () => {
  const text = `滴！学生卡。-- ${moment().format('YYYY-MM-DD HH:mm:ss')} `;
  state.comment.value = text;
  const commentInputEle: Element = document.querySelector('.comment-value-inner') as Element;
  if (commentInputEle) commentInputEle.focus();
};

const handleToWebsite = url => {
  if (url && !url.startsWith('http')) url = 'http://' + url;
  window.open(url, '_blank');
};

onMounted(() => {
  live2dShowMessage('这是我的 「留言板」 ，快来给我留言，或者提提建议吧！');
});

onUpdated(() => {
  live2dReloadElement();
});
</script>

<style lang="scss" scoped>
.entry-content {
  .poem-wrap {
    width: 80%;
    height: 8.75rem;
    border: 0.125rem solid var(--text-color);
    border-top: none;
    text-align: center;
    margin: 2.5rem auto;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .poem-content {
      font-size: 1.4em;
      font-weight: 550;
      color: var(--text-color);
      margin-bottom: 1.25rem;
    }
    .poem-author {
      margin-top: 0.3125rem;
      font-size: 0.875rem;
      color: var(--text-color);
    }
    .poem-border {
      top: 0;
      position: absolute;
      height: 0.125rem;
      width: calc(50% - 6.25rem);
      background-color: var(--text-color);
    }
    .poem-left {
      left: 0;
    }
    .poem-right {
      right: 0;
    }
    .poem-title {
      top: -0.5em;
      position: absolute;
      display: inline-block;
      letter-spacing: 0.25rem;
      color: var(--text-color);
      font-size: 2em;
    }
  }
  .thanks-msg {
    line-height: 1.25rem;
    font-size: 1rem;
    color: var(--theme-light-color-3);
  }
}
.msg-list-content {
  margin-top: 3.75rem;
  .components {
    height: 1.875rem;
    line-height: 1.875rem;
    font-size: 1rem;
    margin-bottom: 1.25rem;
    position: relative;
    width: auto;
    display: inline-block;
    color: var(--text-color);
    &::after {
      position: absolute;
      left: 0;
      bottom: 0;
      content: '';
      display: block;
      height: 0.125rem;
      width: 100%;
      border-radius: 0.125rem;
      background-color: var(--theme-color);
    }
  }
  .msg-item-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    margin: 30px 0;
    .msg-item-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--theme-light-color-5);
      z-index: -1;
      // 旋转
      transform: rotate(-1deg);
    }
    .msg-item {
      width: 100%;
      display: flex;
      flex-direction: column;
      padding: 1.25rem 1.25rem;
      box-shadow: 0.125rem 0.125rem 0.625rem rgba(0, 0, 0, 0.1);
      background-color: var(--msg-bg-color);
      .msg-item-inner {
        padding: 20px;
        border: 1px dashed var(--border-color);
      }
      .info-wrap {
        width: 100%;
        display: flex;
        align-items: center;
        .left-info {
          display: flex;
          align-items: center;
          flex: 1;
          .img-wrap {
            width: 50px;
            height: 50px;
            border-radius: 5px;
            overflow: hidden;
            margin-right: 0.625rem;
            border: 1px solid var(--avatar-border-color);
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
          .r-info {
            height: 50px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            color: var(--text-color);
            .name {
              display: flex;
              align-items: center;
              margin-bottom: 0.25rem;
              font-size: 15px;
              .level {
                border: 0.0625rem solid #ddd;
                color: var(--text-color);
                font-family: 优设标题黑 !important;
              }
            }
            .platform {
              font-size: 0.75rem;
              color: var(--text-color);
              display: flex;
              .pulic-time {
                margin-right: 20px;
              }
            }
          }
        }
        .right-info {
          width: 2.5rem;
          height: 2.5rem;
        }
      }
      .msg-content-wrap {
        .msg {
          margin-top: 1.25rem;
          font-size: 14px;
          color: var(--text-color);
          word-break: break-all;
          // text-indent: 28px;
          background-image: url('@/assets/images/bg/wordline.webp');
          background-repeat: repeat;
          background-size: 40px 40px;
          line-height: 40px;
          min-height: 40px;
        }
        .operation-wrap {
          padding: 10px 0 0 0;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .like-wrap {
            display: flex;
            align-items: center;
            .like-value {
              margin-left: 8px;
              display: inline-block;
              min-width: 15px;
            }
          }
          .comment-wrap {
            margin-left: 10px;
            display: flex;
            align-items: center;
            .comment-icon {
              width: 19px;
            }
            .comment-value {
              margin-left: 8px;
            }
          }
        }
      }
    }
  }
  .sub-commen-wrap {
    width: 100%;
    padding-left: 20px;
    margin-top: 20px;
    .sub-comment-padding {
      border-radius: 5px;
      border-radius: var(--border-radius-1);
      background-color: var(--sub-msg-bg-color);
      padding: 5px 0px 5px;
      .sub-comment-item {
        padding: 5px 10px;
        margin: 5px 0;
        .sub-avatar {
          height: 30px;
          margin-right: 20px;
          border-radius: 5px;
          border: 1px solid var(--avatar-border-color);
        }
        .sub-content {
          margin-top: 0.3125rem;
          font-size: 14px;
          color: var(--text-color);
          word-break: break-all;
          background-image: url('@/assets/images/bg/wordline.webp');
          background-repeat: repeat;
          background-size: 40px 40px;
          line-height: 40px;
        }
        .title {
          display: flex;
          align-items: center;
        }
      }
    }
  }
}
.comment-input-wrap {
  .ttt {
    padding: 0 0.3125rem;
    height: 3rem;
    display: flex;
    justify-content: space-between;
    .back-title {
      font-size: 0.875rem;
      line-height: 2.5rem;
      text-shadow: var(--text-shadow);
      display: flex;
      align-items: center;
    }
    .opertion-wrap {
      display: flex;
      align-items: center;
      .back-me {
        margin-left: 20px;
        border: 1px solid var(--border-color);
        border-radius: 26px;
        padding: 0 8px;
        height: 26px;
        line-height: 26px;
        transition: all 0.6s ease;
        &:hover {
          border-color: var(--theme-color);
          background-color: var(--theme-light-color-3);
          color: #fff;
        }
      }
    }
  }
}

.m-page-container-wrap {
  .max-width-wrap {
    width: var(--content-max-width-m) !important;
    .platform {
      line-height: 0.875rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
  .thanks-msg {
    text-indent: 2rem;
    line-height: 1.125rem;
  }
  .msg-item-wrap {
    margin: 20px 0 !important;
    .msg-item {
      padding: 10px !important;
      .msg-item-inner {
        padding: 10px !important;
      }
    }
  }
  .comment-custom-warp {
    padding-bottom: 15px !important;
  }
}

.msg-input-warp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99;
  .msg-input-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    .input-inner {
      width: 500px;
      height: 40px;
      border: 1px solid var(--border-color);
      border-radius: 40px;
      padding: 5px 30px;
      font-size: 16px;
      display: flex;
      align-items: center;
      background-color: #ffffff99;
      color: #aaa;
      transform: border 0.5s ease-in-out;
      &:hover {
        border-color: var(--theme-color);
      }
    }
  }
  .m-msg-input-box {
    .input-inner {
      width: calc(100vw - 40px);
    }
  }
}
.danmuku-wrap {
  position: absolute;
  top: 0;
  .danmu-item {
    height: 30px;
    padding: 4px 10px 4px 10px;
    border-radius: var(--border-radius-3);
    margin: 5px;
    color: #fff;
    border: 1px solid #fff;
    display: flex;
    align-items: center;
    &:hover {
      .copy-icon {
        opacity: 1 !important;
      }
    }
  }
}
.bozhu {
  padding: 0 0.3125rem;
  font-size: 0.75rem;
  border: 0.0625rem solid var(--theme-light-color-5);
  color: var(--theme-color);
  margin: 0 0.3125rem;
  border-radius: 0.3125rem;
  line-height: 20px;
}
.no-input {
  height: 120px;
  border-radius: var(--border-radius-2);
  background-color: var(--bg-content-color);
  color: var(--empty-text-color);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
}
</style>
